<!--
 * @Date: 2023-10-12 11:52:16
 * @LastEditTime: 2023-10-12 15:59:07
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('ying-xiao-ji-jing-shen-qing')"
  }
}
</route>
<script lang="ts" setup>
import { CinputImage } from "@@/components/common/CinputImages";
import { isNonNullStr } from "@@/utils/tools/is";
import { apiApplyInsured, ApiApplyInsured } from "@@/api/wk/index";
import { uploadImages } from "@@/api/module/upload";
import router from "@@/router";
import useTabPageStore from "@@/store/useTabPageStore";

const tabPgaeStore = useTabPageStore();
const { homeData } = storeToRefs(tabPgaeStore);

let images: CinputImage[] = [];

const form = reactive<ApiApplyInsured.Req>({
  title: "",
  images: "",
  money: "",
});
const { t } = useI18n();
const btnLoading = reactive({
  submit: false,
});

async function submit() {
  btnLoading.submit = true;
  form.images = await uploadImages(images).catch(() => {
    btnLoading.submit = false;
    return Promise.reject();
  });
  const res = await apiApplyInsured(form);
  btnLoading.submit = false;
  if (!res) return;
  router.back();
}
function checkAmount(amount: StrNumber) {
  if (amount === "") return t("qing-tian-xie-gai-zi-duan");
  amount = Number(amount);
  if (amount <= 0) return t("bi-xu-da-yu") + "0";
  const max = Number(homeData.value?.task_setting.insured_fund_max_limit);
  const min = Number(homeData.value?.task_setting.insured_fund_min_limit);
  if (amount < min || amount > max) return `${min}~${max} ${t("zhi-jian")}`;
  return true;
}
</script>
<template>
  <CpageView>
    <van-form @submit="submit" ref="vanFormRef">
      <div class="auto-MT-md">
        <div class="C-T4">{{ $t("shen-qing-jin-e") }}</div>
        <Ccard class="MT-xs PD-sm">
          <Rinput
            v-model="form.money"
            :type="'number'"
            maxlength="30"
            :rules="[
              {
                validator: checkAmount,
              },
            ]"
          />
        </Ccard>
        <div class="C-T4">{{ $t("shen-qing-shuo-ming") }}</div>
        <Ccard class="MT-xs PD-sm">
          <Rinput
            v-model="form.title"
            required
            :placeholder="$t('qing-tian-xie-gai-zi-duan')"
            :type="'textarea'"
            :autosize="{ minHeight: 0, maxHeight: 200 }"
            maxlength="256"
            showWordLimit
            :rules="[
              {
                validator: isNonNullStr,
                message: $t('qing-tian-xie-gai-zi-duan'),
              },
            ]"
            class="inputBox"
          />
        </Ccard>
        <div class="C-T4">{{ $t("tianJiaPingZheng") }}</div>
        <CinputImages
          class="MT-sm"
          @change="(e) => (images = e)"
          :maxLength="3"
        />
      </div>

      <Rbutton
        :loading="btnLoading.submit"
        native-type="submit"
        class="MT-xl MB-xxl"
        round
        bg="var(--C-M1)"
        :size="'large'"
      >
        {{ $t("que-ren-shen-qing") }}
      </Rbutton>
    </van-form>
  </CpageView>
</template>
<style lang="scss" scoped></style>
